<script setup>
import SsqSlt from '@/components/SsqSlt/SsqSlt.vue'
import {
  PlusOutlined,
  SearchOutlined,
  RedoOutlined,
  VerticalAlignBottomOutlined,
  VerticalAlignTopOutlined
} from '@ant-design/icons-vue'
import UploadXlsx from '@/components/UploadXlsx/UploadXlsx.vue'
import { getOptions } from '@/utils'
import { ref } from 'vue'

const emits = defineEmits(['add', 'init', 'search', 'exportToExcel', 'upLoadMould'])
// 新增按钮点击
const add = () => {
  emits('add')
}
// 刷新
// const orderNo = ref('')
const orderName = ref('')
const source = ref('')
const area = ref('')
const payStatus = ref(null)
const init = () => {
  // orderNo.value = ''
  orderName.value = ''
  source.value = ''
  area.value = ''
  payStatus.value = null
  emits('init')
}
// 搜索
const search = () => {
  emits('search', {
    // orderNo: orderNo.value ?? null,
    orderName: orderName.value ?? null,
    source: source.value ?? null,
    area: area.value ?? null,
    payStatus: payStatus.value ?? null
  })
}
//数据导出
const exportToExcel = () => {
  emits('exportToExcel')
}
//下载模板
const upLoadMould = () => {
  emits('upLoadMould')
}
</script>
<template>
  <div class="head">
    <div>
      <AButton class="button" type="primary" @click="add"> <PlusOutlined /> 新增 </AButton>
      <AButton type="primary" class="button" @click="exportToExcel">
        <VerticalAlignBottomOutlined /> 导出
      </AButton>
      <UploadXlsx class="button" @successDown="init" />
      <AButton type="primary" @click="upLoadMould">
        <VerticalAlignBottomOutlined /> 下载模板
      </AButton>
    </div>
    <div class="right">
      <a-input
        @input="search"
        style="width: 200px; max-height: 30px"
        v-model:value="orderName"
        placeholder="请输入订单名称查询"
        allowClear
      >
        <template #suffix>
          <SearchOutlined />
        </template>
      </a-input>
      <a-input
        @input="search"
        v-model:value="source"
        style="width: 200px; max-height: 30px"
        placeholder="请输入订单来源查询"
        allowClear
      >
        <template #suffix>
          <SearchOutlined />
        </template>
      </a-input>
      <SsqSlt
        @change="search"
        v-model="area"
        style="width: 200px"
        placeholder="筛选销售区域"
        allowClear
      />
      <a-select
        @change="search"
        style="width: 200px"
        placeholder="筛选订单状态"
        v-model:value="payStatus"
        :options="getOptions('pay_status')"
        allowClear
        :fieldNames="{ label: 'constLabel', value: 'constValue' }"
      />
      <AButton type="primary" @click="search"> <SearchOutlined /> 搜索 </AButton>
      <AButton type="primary" @click="init"> <RedoOutlined /> 刷新 </AButton>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.head {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  .button {
    margin-right: 10px;
  }
  .right {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
}
</style>